<template>
  <el-header :class="[headerTheme, 'admin-header']" height="70px">
    <div :class="['admin-header-wide', layout, pageWidth]">
      <div :class="['logo', headerTheme]">
        <img src="@/assets/img/logo.png">
        <h1>PRM</h1>
      </div>
      <div class="header-content">
        <div v-if="layout !== 'side' && !isMobile" class="admin-header-menu" :style="`width: ${menuWidth};`">
          <i-menu class="head-menu" :theme="headerTheme" mode="horizontal" :default-active="activatedFirst" :options="menuData" @select="onSelect"/>
        </div>
        <div :class="['admin-header-right', headerTheme]">
<!--          <header-search class="header-item" @active="val => searchActive = val" />-->
          <header-notice class="header-item"/>
          <header-avatar class="header-item"/>
        </div>
      </div>
    </div>
  </el-header>
</template>

<script>
import HeaderSearch from './HeaderSearch'
import HeaderNotice from './HeaderNotice'
import HeaderAvatar from './HeaderAvatar'
import IMenu from '@/components/menu/menu'
import {mapState, mapMutations} from 'vuex'

export default {
  name: 'AdminHeader',
  components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
  props: ['collapsed', 'menuData'],
  data() {
    return {

      searchActive: false
    }
  },
  computed: {
    ...mapState('setting', ['theme', 'isMobile', 'layout', 'systemName', 'pageWidth', "activatedFirst"]),
    headerTheme () {
      if (this.layout == 'side' && this.theme.mode == 'dark' && !this.isMobile) {
        return 'light'
      }
      return this.theme.mode
    },
    menuWidth() {
      const {layout, searchActive} = this
      const headWidth = layout === 'head' ? '100% - 188px' : '100%'
      const extraWidth = searchActive ? '600px' : '400px'
      return `calc(${headWidth} - ${extraWidth})`
    }
  },
  methods: {
    ...mapMutations('setting', ['setActivatedFirst']),
    getFirstChild(routes) {
      const route = routes[0]
      if (!route.children || route.children.length === 0) {
        return route
      }
      return this.getFirstChild(route.children)
    },
    onSelect (obj) {
      if(this.layout === 'mix') {
        this.setActivatedFirst(obj)
        const subMenu = this.$store.getters['setting/subMenu']
        if (subMenu.length > 0) {
          const redirect = this.getFirstChild(subMenu)
          this.$router.push({path: redirect.fullPath})
        }
      } else {
        this.$router.push({obj})
        this.$emit('menuSelect', obj)
      }
    },
  }
}
</script>

<style lang="scss" scoped>
@import "index";
</style>
